<script setup>
import { defineAsyncComponent } from 'vue';

// 使用异步组件导入，避免循环依赖问题
const CoachPersonalStats = defineAsyncComponent(() => import("@/components/charts/CoachPersonalStats.vue"));
const CoachPersonalReserve = defineAsyncComponent(() => import("@/components/charts/CoachPersonalReserve.vue"));
</script>

<template>
    <div class="container">
        <el-row>
            <el-col :span="15">
                <el-row>
                    <el-col :span="24">
                        <div style="width: 100%; height: 200px">
                            <CoachPersonalStats></CoachPersonalStats>
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <div style="width: 100%; height: 400px">
                            <CoachPersonalReserve></CoachPersonalReserve>
                        </div>
                    </el-col>
                </el-row>
            </el-col>

            <el-col :span="9">
                <el-row>
                    <el-col :span="24">
                        <div style="width: 100%; height: 600px; display: flex; align-items: center; justify-content: center; background-color: #FFF; border-radius: 5px;">
                            <div style="text-align: center; color: #666;">
                                <h3>教练数据统计</h3>
                                <p>这里可以添加更多教练相关的图表</p>
                                <p>比如：热门课程、学员评价等</p>
                            </div>
                        </div>
                    </el-col>
                </el-row>
            </el-col>
        </el-row>
    </div>
</template>

<style scoped>
.container {
    min-height: 100%;
    background-color: #F5F5F5;
}

.container > .el-row {
    padding: 15px;
}

.title {
    text-align: center;
    color: #1A232A;
    font-size: 36px;
}

.el-col .el-col {
    background-color: #FFF;
    border-radius: 5px;
}

.el-row .el-row {
    margin-bottom: 15px;
    margin-right: 15px;
}
</style>

